<template>
  <view>
    <view class="dynamic-box">
      <view class="dynamic-title t-a-c m-b-20" style="position: relative;">
        <text @click="changeActive(0)"
          :class="['grey-deep-font-color','f-s-14','f-w','m-r-20',activeIndex===0?'active':'']">关注</text>
        <text @click="changeActive(1)"
          :class="['grey-deep-font-color','f-s-14','f-w','m-l-20',activeIndex===1?'active':'']">话题</text>
        <text @click="goAddInput()" class="iconfont icon-fatie_icon add-input"></text>
      </view>
      <view class="dynamic-text">
        <swiper :current="activeIndex" @change="changeSwiper" style="height: 1050rpx;">
          <swiper-item>
            <scroll-view @scrolltolower="ReachBottom" scroll-y="true" style="height: 1050rpx;">
              <block v-for="(item1,index1) in messageList" :key="index1">
                <my-message :concern="activeIndex===0?false:true" @changeUnlike="changeUnlike" @changeLike="changeLike"
                  @changeConcern="changeConcern" :info="item1"></my-message>
              </block>
              <view class="grey-light-bg-color t-a-c l-h-80" style="height: 80rpx;">已经到底了</view>
            </scroll-view>
          </swiper-item>
          <swiper-item>
            <my-topic></my-topic>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: 1,
        messageList: [{
          id: 1,
          headImg: "/static/logo.png", //头像
          name: "测试姓名1", //昵称
          time: new Date(), //发布时间
          Concern: true, //是否关注
          content_text: '测试内容111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', //内容
          content_img: null,
          like: 2, //点赞数量
          unLike: 0, //踩数量
          message: 3 //留言数量
        }, {
          id: 2,
          headImg: "/static/logo.png", //头像
          name: "测试姓名2", //昵称
          time: new Date(), //发布时间
          Concern: true, //是否关注
          content_text: '2222222222222222222222222222222222222', //内容
          content_img: null,
          like: 0, //点赞数量
          unLike: 4, //踩数量
          message: 10 //留言数量
        }, {
          id: 3,
          headImg: "/static/logo.png", //头像
          name: "测试姓名3", //昵称
          time: new Date(), //发布时间
          Concern: false, //是否关注
          content_text: '33333333333333333333333333333333333333333333333333333333333', //内容
          content_img: "/static/test.jpg",
          like: 5, //点赞数量
          unLike: 7, //踩数量
          message: 0 //留言数量
        }]
      };
    },
    methods: {
      changeActive(index) {
        this.activeIndex = index
      },
      goAddInput() {
        uni.navigateTo({
          url: "/subpkg/add-input/add-input"
        })
      },
      changeSwiper(e) {
        this.activeIndex = e.detail.current
      },
      // 关注或者取关
      changeConcern(id) {
        this.messageList.forEach(item => {
          if (item.id === id) {
            item.Concern = !item.Concern
            uni.$showMsg(item.Concern ? "关注成功~" : "取消关注")
            // 之后还要向后端发送请求
          }
        })
      },
      // 点赞和取消点赞
      changeLike(data) {
        this.messageList.forEach(item => {
          if (item.id === data.id) {
            if (data.flag) {
              item.like++
              uni.$showMsg("点赞成功~")
            } else {
              item.like--
              uni.$showMsg("取消点赞")
            }
            // 之后还要向后端发送请求
          }
        })
      },
      // 踩和取消
      changeUnlike(data) {
        this.messageList.forEach(item => {
          if (item.id === data.id) {
            if (data.flag) {
              item.unLike++
              uni.$showMsg("感谢反馈")
            } else {
              item.unLike--
              uni.$showMsg("取消不喜欢")
            }
            // 之后还要向后端发送请求
          }
        })
      },
      // scroll-view的下拉刷新，要进行节流阀控制
      ReachBottom() {
        console.log(123)
      }
    },
    // 下拉刷新
    onPullDownRefresh() {
      console.log(123)
    }
  }
</script>
<style lang="scss">
  .active {
    font-size: 20px;
    color: #FD587B;
  }

  .add-input {
    position: absolute;
    top: 10rpx;
    right: 20rpx;
    font-size: 20px;
    font-weight: 900;
  }
</style>